<template>
  <a-spin :spinning="loading" :tip="t('请稍后······')">
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item :label="t('邮箱')" v-bind="validateInfos.email">
        <a-input
          v-model:value="modelRef.email"
          :placeholder="t('请输入邮箱')"
          allow-clear
        >
          <template #addonAfter>
            <a-button
              type="link"
              size="small"
              @click="handleEmail"
              :loading="emailState.loading"
            >
              {{
                emailState.seconds > 0
                  ? emailState.seconds
                  : emailState.flag
                  ? t("重新发送")
                  : t("发送验证码")
              }}
            </a-button>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item :label="t('验证码')" v-bind="validateInfos.code">
        <a-input
          v-model:value="modelRef.code"
          :placeholder="t('请输入验证码')"
          allow-clear
        >
        </a-input>
      </a-form-item>
    </a-form>
  </a-spin>
  <a-space style="float: right">
    <a-button @click="emit('cancel')">{{ t("取消") }}</a-button>
    <a-button type="primary" :loading="loading" @click="handleSubmit">
      {{ t("下一步") }}
    </a-button>
  </a-space>
  <div style="clear: both"></div>
</template>
<script lang="ts" setup>
import { sendEmailCode, verifyEmailCode } from "@/api/auth";
import { VerifyEmailParams } from "@/api/auth/typing";
import { Form } from "ant-design-vue";
import { reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["cancel", "next"]);
const { t } = useI18n();
const modelRef = reactive<VerifyEmailParams>({
  email: null,
  code: null,
});
const modelRule = {
  email: [
    { required: true, message: () => t("请输入邮箱"), trigger: "blur" },
    { type: "email", message: () => t("邮箱格式不正确"), trigger: "blur" },
  ],
  code: [{ required: true, message: t("请输入验证码"), trigger: "blur" }],
};
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);

const emailState = reactive({
  loading: false,
  seconds: 0,
  timer: null,
  flag: false,
});
// 发送邮箱验证码
const handleEmail = async () => {
  if (emailState.seconds > 0) return;
  const valid = await validate("email");
  if (!valid) return;
  emailState.loading = true;
  const { success } = await sendEmailCode(modelRef);
  emailState.loading = false;
  if (success) {
    emailState.flag = true;
    emailState.seconds = 60;
    emailState.timer = setInterval(() => {
      emailState.seconds--;
      if (emailState.seconds <= 0) {
        clearInterval(emailState.timer);
        emailState.timer = null;
      }
    }, 1000);
  }
};
const loading = ref(false);
// 验证邮箱验证码
const handleSubmit = async () => {
  const valid = await validate();
  if (!valid) return;
  loading.value = true;
  const { success } = await verifyEmailCode(modelRef);
  loading.value = false;
  if (success) {
    emit("next");
  }
};
defineExpose({ resetFields, modelRef });
</script>
